{extend name="public/layer_base" /}
{block name='content'}

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card" style="overflow: hidden;">
            <div class="layui-card-body ">

                <div class="layui-col-md4 layui-col-lg3">
                    <div class=" box-profile">
                        <img class="profile-user-img img-responsive img-circle" src="{$admin.user.avatar}" alt="头像">
                        <h3 class="profile-username text-center">{$admin.user.nickname}</h3>
                        <p class="text-muted text-center">{$admin.user.username}</p>
                        <p>
                            {foreach name='admin.user.role_text' id='role'}
                            <span class="layui-badge layui-bg-green">{$role.name}</span>
                            {/foreach}
                        </p>
                    </div>
                </div>
                <div class="layui-col-md1 layui-col-lg1">
                </div>
                <div class="layui-col-md6 layui-col-lg6">

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">个人信息</li>
                            <li>修改密码</li>
                            <li>修改头像</li>

                        </ul>
                        <div class="layui-tab-content">

                            <div class="layui-tab-item layui-show">
                                <form class="layui-form" method="post">
                                    <input type="hidden" value="profile" name="update_type" placeholder="请勿修改">
                                    <div class="layui-form-item">
                                        <label for="nickname" class="layui-form-label">昵称</label>
                                        <div class="layui-input-inline">
                                            <input maxlength="50" id="nickname" name="nickname"
                                                value="{$admin.user.nickname}" class="layui-input" placeholder="请输入昵称">
                                        </div>
                                    </div>

                                    {:token_field()}
                                    <div class="layui-form-item">
                                        <label for="L_repass" class="layui-form-label"></label>
                                        <button class="layui-btn" lay-filter="submit" id="submit" lay-submit="submit"
                                            type="button">保存</button>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-tab-item ">
                                <form class="layui-form" id="dataForm2" action="" method="post">
                                    <input type="hidden" value="password" name="update_type" placeholder="请勿修改">

                                    <div class="layui-form-item">
                                        <label for="password" class="layui-form-label">当前密码</label>
                                        <div class="layui-input-inline">
                                            <input id="password" name="password" type="password" autocomplete='password'
                                                class="layui-input" placeholder="请输入当前密码">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label for="new_password" class="layui-form-label">新密码</label>
                                        <div class="layui-input-inline">
                                            <input id="new_password" name="new_password" type="password"
                                                autocomplete='off' class="layui-input" placeholder="请输入当前密码">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label for="renew_password" class="layui-form-label">确认新密码</label>
                                        <div class="layui-input-inline">
                                            <input id="renew_password" name="renew_password" type="password"
                                                autocomplete='off' class="layui-input" placeholder="再次输入新密码">
                                        </div>
                                    </div>

                                    {:token_field()}
                                    <div class="layui-form-item">
                                        <label for="L_repass" class="layui-form-label"></label>
                                        <button class="layui-btn" lay-filter="submit" id="submit" lay-submit="submit"
                                            type="button">保存</button>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-tab-item ">
                                <form class="layui-form" id="dataForm2" action="" method="post">

                                <div class="layui-form-item">
                                    <input type="hidden" value="avatar" name="update_type" placeholder="请勿淘气修改">

                                    <label for="avatar" class="layui-form-label">头像</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-upload-drag" id="upload">
                                            <i class="layui-icon"></i>
                                            <p>点击上传，或将文件拖拽到此处</p>
                                        </div>
                                        <div class="layui_img">
                                            <div class="layui-progress thumb_progress" id="progress"
                                                lay-showPercent="yes" lay-filter="progressBar">
                                                <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                                            </div>
                                            <img src="{$admin.user.avatar|default=''}" id="srcimgthumb" alt=""
                                                class="srcimgavatar" srcset="">
                                            <input type="hidden" name="avatar" id="inputimgthumb"
                                                value="{$admin.user.avatar|default=''}">
                                        </div>
                                    </div>

                                    <script>
                                        layui.use('upload', function () {
                                            var upload = layui.upload;
                                            upload.render({
                                                elem: '#upload'
                                                , url: "{:url('upfile/upload')}"
                                                , acceptMime: 'image/*'
                                                , accept: 'images'
                                                , size: 1024
                                                , progress: function (n, elem, res, index) {
                                                    $('.thumb_progress').show();
                                                    var percent = n + '%'
                                                    element.progress('progressBar', percent);
                                                }
                                                , done: function (res, index, upload) {
                                                    $("#inputimgthumb").val(res.data.url);
                                                    $('.thumb_progress').hide();
                                                    $("#srcimgthumb").attr('src', res.data.url).show();

                                                }
                                            });
                                        })
                                    </script>
                                    {:token_field()}
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <button class="layui-btn" lay-filter="submit" id="submit" lay-submit="submit"
                                            type="button">保存</button>
                                    </div>
                                </form>

                                </div>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

    {/block}